<template>
  <div class="box">
    <!-- 标题 -->

    <van-nav-bar class="bj" title="个人信息" left-arrow @click-left="on"/>

    <!-- 头像面板 -->
    <div class="footer">
      <input type="file" accept="image/*" ref="file" class="imgs" @change="upload"/>
      <van-cell title="头像" center class="bodyes">
        <van-image round width="50" height="50" :src="user.avatar" />
      </van-cell>
      <van-cell title="昵称" :value="user.nickname" is-link @click="newname" />
      <van-cell title="性别" :value="user.sex" is-link @click="newsex" />
      <van-cell title="生日" :value="user.birthday" is-link @click="newbirsty"/>
    </div>
    <van-button class="sure" type="primary" block @click="editUserInfo" color="pink">确定</van-button >
      
   

    <van-dialog
      v-model="show"
      title="修改昵称"
      show-cancel-button
      @confirm="qdnc"
      @cancel="qxnc"
    >
      <input type="text" class="nc" v-model="newName" />
    </van-dialog>
    <van-popup v-model="cont" position="bottom">
      <van-picker
        title="性别"
        show-toolbar
        :columns="columns"
        @confirm="Confirm"
        @cancel="qxnc"
      />
    </van-popup>
    <van-popup v-model="time" position="bottom">
      <van-datetime-picker
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="Contime"
        @cancel="qxnc"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
const moment= require('moment')
export default {
  methods: {
    on() {
      this.$router.push("/My");
    },
    // 弹出层
    showPopup() {
      this.shows = true;
    },
    onClickLeft() {
      Toast("返回");
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    newname() {
      this.show = true;
      this.user.nickname = this.newName;
    },
    qdnc() {
      this.user.nickname = this.newName;
      this.show = false;
    },
    qxnc() {
      this.show = false;
      this.cont = false;
      this.time = false;
    },
    Confirm(value) {
      this.user.sex = value;
      this.cont = false;
    },
    newsex() {
      this.cont = true;
    },
    newbirsty() {
      this.time = true;
    },
    Contime(value) {
      const data = moment(value).format("YYYY-MM-DD");
      this.user.birthday = data;
      this.time = false;
    },
     
    async upload(e) {
         let file = e.target.files[0]
                let { type } = file;
                //  拿到类型  比如jpg
                type = type.split('/')[1];  
                // 重新命名
                let file_name = `${new Date().getTime()}_${Math.random()
                    .toString(36)
                    .slice(2)}.${type}`;
                // 去自己的服务器拿到上传七牛云需要的 token  为何放在服务端呢?  主要是为了安全，因为里边包含了一些账号信息
                let { token } = await this.$http.post('/upload/token');
                
                // new一个form data   并且把文件 token  和文件的名字放进去  file token key是固定的 不能改 
                const formdata = new FormData();
                formdata.append('file', file);
                formdata.append('token', token);
                formdata.append('key', file_name);
                // https://upload-z1.qiniup.com 是上传到七牛的真正接口  其中z1是华北区域
                let result = await this.$http.post('https://upload-z1.qiniup.com', formdata);
                console.log(result);
                console.log(`http://toutiao.longxiaokj.com/` + result.key);
                this.user.avatar = `http://toutiao.longxiaokj.com/` + result.key
                // `http://toutiao.longxiaokj.com/` + result.key  这个地址就是传到服务器的地址  
                // 发布文章时 imageSrc  字段需要的就是这个
    },
      editUserInfo(){
                
                this.$http.post('/user/editUserInfo',this.user)
                .then((res)=>{
                    console.log(res)
                    console.log(this.user)
                    localStorage.setItem('Token',JSON.stringify(this.user))
                    this.$router.push('/My')
                })
                .catch((error)=>{
                    console.log(error)
                    
                })
            }
        },
        created(){
          // console.log(this.user);
            let userInfo = JSON.parse(localStorage.getItem('Token'))
            this.user.avatar = userInfo.avatar
            this.user.nickname = userInfo.nickname
            this.user.sex = userInfo.sex
            this.user.birthday = userInfo.birthday
            this.user.uid = JSON.parse(localStorage.getItem('user')).uid
            // console.log(this.user.avatar)
            // this.user.uid = userInfo.uid
        },
  data() {
    return {
      user: {
        avatar: "",
        nickname: "小明",
        sex: "男",
        birthday: "",
        uid: "",

      },
      show: false,
      newName: "",
      columns: ["男", "女"],
      cont: false,
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(),
      time: false,
    };
  },
};
</script>

<style lang="less" scoped>
// .bodyes{
//   z-index: 3;
//   margin-top:-30px ;
// }
.box{
    height: 100vh;
        position: relative;
        z-index: 9;
        background-color: #fff;
}
.bj{
    width: 100%;
    height:46px;

}
.imgs{
    width: 100%;
    height: 79.21px;
    position: fixed;
    z-index: 2;
    opacity: 0;
    margin-bottom:-20px ;
}
.footer .van-cell{
    text-align: left;
    border: 1px solid #f7f7f9;
}
.sure{
    width: 70%;
    margin: 0 auto;
     margin-top: 30px;
}
.nc{
    display: block;
    width: 80%;
    border: 1px solid #ccc;
    margin-top: 10px;
    line-height: 30px;
}
</style>